<template>
  <div class="app">
    <input v-model="searchName" placeholder="输入关键字搜索" />
    <visitList :records="recordsList" @isShow="isShow" />
    <baseVisitInfo
      v-show="isShowFlag"
      :visitInfo="visitInfo"
      @windOff="windOff"
    />
  </div>
</template>

<script>
import visitList from "./components/visitList.vue";
import baseVisitInfo from "./components/baseVisitInfo.vue";
export default {
  data() {
    return {
      records: [
        {
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
      isShowFlag: false,
      visitInfo: {},
      searchName: "",
      recordsList: [],
    };
  },
  components: { visitList, baseVisitInfo },
  methods: {
    isShow(info) {
      this.isShowFlag = !this.isShowFlag;
      this.visitInfo = info;
    },
    windOff() {
      this.isShowFlag = !this.isShowFlag;
    },
  },
  watch: {
    searchName: {
      immediate: true,
      handler(name) {
        if (!name) {
          this.recordsList = this.records;
        } else {
          this.recordsList =
            this.records.filter((item) => item.doctor === name) || [];
        }
      },
    },
  },
};
</script>

<style></style>
